<template>
  <div class="profile-page">
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="image" class="user-img" />
            <h4>{{ username }}</h4>
            <p>
              {{ bio }}
            </p>
            <nuxt-link
              v-if="username === user.username"
              :to="{ name: 'setting' }"
              class="btn btn-sm btn-outline-secondary action-btn"
            >
              <i class="ion-gear-a"></i> Edit Profile Settings
            </nuxt-link>
            <button
              v-else
              class="btn btn-sm btn-outline-secondary action-btn"
              :class="following ? 'active' : ''"
              :disabled="followLoading"
              @click="handleFollow"
            >
              <i class="ion-plus-round"></i>
              &nbsp; Follow {{ username }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <nuxt-link
                  :to="{
                    name: 'profile',
                    params: { username },
                  }"
                  class="nav-link"
                  :class="tab === 'my' ? 'active' : ''"
                  exact
                  >My Articles</nuxt-link
                >
              </li>
              <li class="nav-item">
                <nuxt-link
                  :to="{
                    name: 'profile',
                    params: { username },
                    query: { tab: 'fav' },
                  }"
                  class="nav-link"
                  :class="tab === 'fav' ? 'active' : ''"
                  exact
                  >Favorited Articles</nuxt-link
                >
              </li>
            </ul>
          </div>

          <Arttie v-for="art in articles" :key="art.slug" :art="art"></Arttie>

          <!-- 分页 -->
          <Paggie
            :total="totalPage"
            :page="page"
            :to="{
              name: 'profile',
              params: { username },
              query: { tab },
            }"
          ></Paggie>
          <!-- /分页 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { follow, getProfile, unfollow } from '@/api/profile'
import { listArticle } from '@/api/article'
import Arttie from '@/components/arttie'
import Paggie from '@/components/paggie'
import { mapState } from 'vuex'

export default {
  middleware: 'auth',
  name: 'UserProfile',
  components: {
    Arttie,
    Paggie,
  },
  async asyncData({ query, params }) {
    const tab = query.tab || 'my'
    const limit = 10
    const page = Number.parseInt(query.page || 1)
    let prop = { limit, offset: (page - 1) * limit }
    if (tab === 'my') {
      prop.author = params.username
    } else {
      prop.favorited = params.username
    }
    const [{ profile }, { articles, articlesCount }] = await Promise.all([
      getProfile(params.username),
      listArticle(prop),
    ])
    return {
      ...profile,
      limit,
      page,
      tab,
      articles,
      articlesCount,
    }
  },
  data() {
    return {
      followLoading: false,
    }
  },
  computed: {
    ...mapState(['user']),
    totalPage() {
      const pages = Math.ceil(Number.parseInt(this.articlesCount) / this.limit)
      return pages >= 50 ? 50 : pages
    },
  },
  watchQuery: ['tab', 'page'],
  methods: {
    handleFollow() {
      this.followLoading = true
      const fo = this.following ? unfollow : follow
      fo(this.username)
        .then(() => {
          this.following = !this.following
        })
        .finally(() => {
          this.followLoading = false
        })
    },
  },
}
</script>

<style></style>
